<template>
    <div>
        <div class="renewal_header">
            <div class="header_pensonal">
                <img src="../assets/man.png" alt="" @click="goto()">
            </div>
            <div class="renewal_box">
                <div class="renewal_info">
                    <div class="renewal_info_box">
                        <img src="../assets/renewal_01.png" alt="">
                        <div class="renewal_info_title">会员号：{{cardinfo.card_no}}</div>
                    </div>
                    <!-- <div class="renewal_date">有效期：{{cardinfo.retime}}-{{cardinfo.endtime}}</div> -->
                </div>
            </div>
            <div class="renewal_card_box">
                <div class="renewal_card">
                    <div class="renewal_card_title">{{cardinfo.body}}</div>
                    <div class="renewal_card_money">￥{{cardinfo.price}}/年</div>
                    <div class="renewal_card_select">已选</div>
                </div>
            </div>
            <div class="renewal_btn">
                <button class="renewal_button" @click="pay">立即续费</button>
            </div>
        </div>
        <!-- <div class="renewal_popup_box">
            <mt-popup v-model="renewalpopupVisible" position="bottom">
                <div class="renewal_popup_title">
                    付款详情
                    <div class="renewal_popup_close" @click="close">x</div>
                </div>
                <div class="renewal_popup_info">
                    <div class="renewal_popup_money">
                        <span>￥</span>{{cardinfo.poid}}
                    </div>
                    <div class="renewal_popup_pay">
                        <div class="renewal_popup_pay_title">付款方式</div>
                        <div class="renewal_popup_pay_type">
                            零钱<img src="../assets/arrow_right_gray.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="renewal_popup_btn">
                    <button class="renewal_button" @click="pay">立即付款</button>
                </div>
            </mt-popup>
        </div>         -->
    </div>
</template>
<script>
import header from '@/components/common/header'
import footer from '@/components/common/footer'
import cookie from "../../store/modules/cookie"
    export default {
        components: {
            'v-header': header,
            'v-footer': footer
        },
        data () {
            return {
                openid:0,
                ishaveCard:true,
                cardinfo:{}
            }
        },
        created(){            
            let type = this.$route.query.typeid
            if(type == 2){
                 //续费
               this.renewal()               
            }else{
                //还没有开卡,开卡，没有支付
               this.getOrder()
            }
        },
        methods: {
            getOrder(){
                let that = this
                that.openid = cookie.getCookie('openid')
                this.$http.get('/user/order/getOrder',{openid:that.openid}).then((res)=>{
                    if(res.code == 0){
                        that.cardinfo = res.data
                    }else{
                        that.$messagebox(res.msg)
                    }
                })
            },
            // 续费
            renewal () {
                let that = this
                that.openid = cookie.getCookie('openid')
                this.$http.get('/user/order/renewal',{openid:that.openid}).then((res)=>{
                    if(res.code == 0){
                        if(res.data.price){
                            res.data.price = parseInt(res.data.price)/100
                        }
                        that.cardinfo = res.data
                    }else{
                        that.$messagebox(res.msg)
                    }
                })
            },
            // 立即付款
            pay () {
                let that = this;
                that.openid = cookie.getCookie('openid')
                that.$http.get('/user/order/newpay',{openid:that.openid,poid:that.cardinfo.poid}).then((res)=>{
                    if(res.code == 0){
                        if (typeof WeixinJSBridge == "undefined"){
                            if( document.addEventListener ){
                                document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady, false);
                            }else if (document.attachEvent){
                                document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady);
                                document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady);
                            }
                        }else{
                            that.onBridgeReady(res.data);
                        }
                    }else{
                        this.$messagebox(res.msg)
                    }
                })
            },
            goto(){
                this.$router.push({
                    path:'/my'
                })
            },
            //调起微信支付
            onBridgeReady (data) {
                let that = this
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', data,
                    function(res){
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                        that.Jump('ok')
                    }else{
                        that.Jump('fail')
                        this.$messagebox({
                            title:"提示",
                            message:res.err_msg
                        })
                    }
                });
            },
            //页面跳转函数
            Jump(type){
                const timejump = 3;
                if(!this.timer){
                    this.count = timejump ;
                    this.show = false;
                    this.timer = setInterval(()=>{
                    if(this.count > 0 && this.count <= timejump ){
                        this.count--;
                    }else{
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                        //跳转的页面写在此处
                        this.$router.push({
                            path: '/paySuccess',
                            query:{
                                type:type
                            }
                        });
                    }
                },100)
                }
            }
        }
    }
</script>
<style scoped>
.renewal_header{
    background: url('../assets/header_bg.png') no-repeat center center;
    background-size: 100% 100%;
    width: 100%;
    height: 559px;
    box-sizing: border-box;
    padding: 0px;
}
.header_pensonal{
    text-align: right;
    padding: 52px 48px 52px 0;
    box-sizing: border-box;
}
.header_pensonal img{
    width: 74px;
    height: 74px;
}
.renewal_box{
    padding: 0 56px 44px 56px;
}
.renewal_info{
    border-radius: 5px;
    padding: 60px 82px 116px 82px;
    background-color: #fff;
}
.renewal_info_box{
    background: #231815;
    padding: 103px 15px 74px 15px;
    text-align: center;
    border-radius: 48px;
}
.renewal_info_box img{
    width: 497px;
    height: 194px;
}
.renewal_info_title{
    font-size: 46px;
    line-height: 46px;
    color: #fff;
    margin-top: 65px;
}
.renewal_date{
    font-size: 36px;
    line-height: 36px;
    margin-top: 38px;
    text-align: center;
}
.renewal_card_box{
    padding: 0 137px 0 134px;
}
.renewal_card{
    height: 181px;
    border: 1px solid #231815;
    padding: 36px 0 29px 0;
    text-align: center;
    border-radius: 48px;
    color: #000;
    position: relative;
}
.renewal_card_title{
    font-size: 40px;
    line-height: 40px;
    font-weight: bold;
}
.renewal_card_money{
    font-size: 50px;
    line-height: 50px;
    margin-top: 28px;
}
.renewal_card_select{
    position: absolute;
    left: -1px;
    top: -1px;
    background: #0BFFDE;
    border-radius: 30px 0 30px 0;
    color: #231815;
    font-size:35px;
    height: 62px;
    line-height: 62px;
    padding: 0 32px 0 40px;
}
.renewal_btn{
    padding: 132px 58px 0 58px;
}
.renewal_button{
    font-size: 48px;
    color: #231815;
    background: #22CFB6;
    height: 135px;
    line-height: 135px;
    border: 0;
    border-radius: 12px;
    width: 100%;
}
.renewal_popup_box .mint-popup-bottom{
    width: 100%;
    bottom: 0;
}
.renewal_popup_title{
    color: #231815;
    font-size: 46px;
    border-bottom: 1px solid #2D2D2D;
    height: 135px;
    line-height: 135px;
    text-align: center;
    position: relative;
}
.renewal_popup_close{
    font-size: 72px;
    color: #000;
    position: absolute;
    left: 58px;
    top: 32px;
    height: 72px;
    line-height: 72px;
}
.renewal_popup_info{
    padding-left: 53px;
}
.renewal_popup_money{
    font-size: 79px;
    text-align: center;
    height: 220px;
    line-height: 220px;
    border-bottom: 1px solid #2d2d2d;
}
.renewal_popup_money span{
    font-size: 50px;
}
.renewal_popup_pay{
    display: flex;
    justify-content: space-between;
    height: 113px;
    line-height: 113px;
    border-bottom: 1px solid #2d2d2d;
    padding: 0 62px 0 14px;
    font-size: 36px;
}
.renewal_popup_pay_title{
    color: #7F7F7F;
}
.renewal_popup_pay_type{
    color: #231815;
}
.renewal_popup_pay_type img{
    width: 14px;
    height: 24px;
    margin-left: 26px;
}
.renewal_popup_btn{
    padding: 92px 58px 84px 58px;
}
</style>